<template>
  <el-container class="con" v-if="tokenState">
    <el-header style="background-color: #071135;">
      <el-menu
          class="el-menu-demo"
          mode="horizontal"
          background-color="#071135"
          text-color="#fff"
          active-text-color="#ffd04b"
      >

        <el-menu-item style="font-size: 20px"><img src="../assets/logo.png" style="margin-right: 10px;margin-bottom: 4px"></img>华为云手机集群<span style="font-size: 20px;color: #5292D8;margin-left: 10px;font-family: '楷体'">性能测试及Bench展示平台</span></el-menu-item>
        <el-menu-item style="float:right;" @click="exit"><i class="el-icon-close"></i>退出登录</el-menu-item>
        <el-submenu style="float:right;" @click="exit">
          <template slot="title">当前服务器：{{ $store.state.server.serverName }}</template>
          <el-menu-item v-for="index in serverList.length" @click="serverChange(index)" :key="index">{{serverList[index - 1].label}}</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-header>
    <el-container>
      <el-aside width="200px" >
        <el-menu
            default-active="1"
            router
            unique-opened
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#071135"
            text-color="#fff"
            active-text-color="#ffd04b"
        >
          <el-submenu index="1" v-if="this.$store.state.functionList.server">
            <template slot="title"><i class="el-icon-postcard"></i>基础与性能指标</template>
            <el-menu-item index="/serverInfo"><i class="el-icon-upload"></i>服务器管理</el-menu-item>
            <el-menu-item index="/baseInfo"><i class="el-icon-document-copy"></i>软件层基础数据</el-menu-item>
            <el-menu-item index="/performanceGraph"><i class="el-icon-data-line"></i>实时性能指标</el-menu-item>
            <el-menu-item index="/performanceLatestTime"><i class="el-icon-data-line"></i>区间性能指标</el-menu-item>
          </el-submenu>
          <el-submenu index="2" v-if="this.$store.state.functionList.container">
            <template slot="title"><i class="el-icon-s-data"></i>云手机容器管理</template>
            <!--          <el-submenu index="2-3">-->
            <!--            <span slot="title"><i class="el-icon-s-data"></i>云手机容器管理</span>-->
            <el-menu-item index="/cloudPhoneBaseInfo"><i class="el-icon-info"></i>基础信息</el-menu-item>
            <el-menu-item index="/cloudPhoneManager"><i class="el-icon-mobile"></i>测试数据</el-menu-item>
            <el-menu-item index="/addScene"><i class="el-icon-data-board"></i>场景配置</el-menu-item>
            <!--          </el-submenu>-->

            <!--          <el-menu-item index="/cloudPhoneManager_v">视频流云手机容器管理</el-menu-item>-->
          </el-submenu>
          <el-submenu index="3" v-if="this.$store.state.functionList.experience">
            <template slot="title"><i class="el-icon-menu"></i>体验指标</template>
            <el-menu-item index="/fluency"><i class="el-icon-data-analysis"></i>流畅性指标</el-menu-item>
            <el-menu-item index="/stability"><i class="el-icon-magic-stick"></i>稳定性指标</el-menu-item>
            <el-menu-item index="/touch"><i class="el-icon-thumb"></i>触控体验指标</el-menu-item>
            <el-menu-item index="/spquality"><i class="el-icon-microphone"></i>音画质量指标</el-menu-item>
          </el-submenu>
          <!--        <el-submenu index="4">-->
          <!--          <template slot="title">视频流体验指标</template>-->
          <!--          <el-menu-item index="/fluency_v">流畅性指标</el-menu-item>-->
          <!--          <el-menu-item index="/stability_v">稳定性指标</el-menu-item>-->
          <!--          <el-menu-item index="/touch_v">触控体验指标</el-menu-item>-->
          <!--          <el-menu-item index="/spquality_v">音画质量指标</el-menu-item>-->
          <!--        </el-submenu>-->
          <el-submenu index="5" v-if="this.$store.state.functionList.user">
            <template slot="title"><i class="el-icon-user-solid"></i>用户管理</template>
            <!--          <icon name="user" spin scale="1.2" label="用户管理" slot="title"></icon>-->
            <el-menu-item index="/userManager"><i class="el-icon-user"></i>用户管理</el-menu-item>
            <el-menu-item index="/roleManager"><i class="el-icon-user"></i>角色管理</el-menu-item>
            <el-menu-item index="/systemFunction"><i class="el-icon-setting"></i>功能菜单管理</el-menu-item>
          </el-submenu>
          <el-submenu index="6" v-if="this.$store.state.functionList.system">
            <template slot="title"><i class="el-icon-s-tools"></i>系统设置</template>
            <el-menu-item index="/systemSetting"><i class="el-icon-setting"></i>脚本采集设置</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <app-main></app-main>
      </el-main>
    </el-container>
    <!--    <el-container v-show="$store.state.server.serverId==='0'">-->
    <!--    <h3 style="margin: 0 auto;color: red">请在顶部导航栏选择服务器！</h3>-->
    <!--    </el-container>-->
  </el-container>


</template>

<script>
import AppMain from "@/components/AppMain";
import uploadPageLocal from "@/views/baseInfo";
import {userAuth} from "@/api/system";
import {serverList} from "@/api/server";
export default {
  components: {AppMain, uploadPageLocal},
  data(){
    return{
      serverList:[
      ],
      serverName:'服务器选择',
      tokenState : false
    }
  },

  created() {
    // token获取
    if (localStorage.getItem('Authorization')) {
      this.tokenState = true
    }
    serverList().then(res=>{
    // axios.get(this.$ip2 + '/server/list/').then(res=>{
      this.serverList =[]
      for (let i =0;i<res.data.length;i++){
        this.serverList.push({
          value:res.data[i].server_id,
          label:res.data[i].server_id + ':' + res.data[i].server_name
        })
      }
      this.$store.commit("changeServerList",this.serverList)
    })
    // 功能获取
    this.$store.state.functionList.user = false
    this.$store.state.functionList.server = false
    this.$store.state.functionList.container = false
    this.$store.state.functionList.experience = false
    this.$store.state.functionList.system = false
    userAuth().then(res=>{
      console.log('res',res.data);
      for (let i = 0; i < res.data.length; i ++) {
        if (res.data[i].function_name === '服务器管理') {
          this.$store.commit("changeFunction", 'server')
        }
        else if (res.data[i].function_name === '云手机容器管理') {
          this.$store.commit("changeFunction", 'container')
        }else if (res.data[i].function_name === '体验指标') {
          this.$store.commit("changeFunction", 'experience')
        }
        else if (res.data[i].function_name === '系统管理') {
          this.$store.commit("changeFunction", 'system')
        }
        else {
          this.$store.commit("changeFunction", 'user')
        }
      }
    })
  },

  methods: {
    serverChange(index) {
      // this.$serverName.setserverName(this.serverList[index - 1].label)
      // console.log('?',this.$serverName.serverName);
      this.$store.commit("changeServerName",this.serverList[index - 1].label)
      this.$store.commit("changeServerId",this.serverList[index - 1].value)
      location.reload()
    },
    handleOpen(key, keyPath) {
      // if (this.$store.state.server.serverId === '0') {
      //   alert('请选择服务器')
      //   this.handleClose(key, keyPath)
      //   return;
      // }
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 退出登录
    exit(){
      this.$confirm('确定要退出登录吗？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        localStorage.removeItem('Authorization')
        this.$router.push("/")
      })
      // if (confirm('你确定要退出登录吗？')){
      //   // this.$store.state.token = ''
      //
      // }

    },
    // 用户管理
    userManage() {
      this.$router.push("/userManager")
    }
  }
}
</script>
<style scoped>
.el-icon-mobile-phone{
  color: white;
}
.el-menu-vertical-demo{
  /*解决侧边栏颜色无法撑起整个高度问题*/
  /*height: 100vh;*/
  /*解决侧边栏凸起问题*/
  border-right: none;
}
/*.el-menu {*/
/*  height: 100vh;*/
/*}*/
/*.el-menu-demo{*/
/*  height: 6.1vh;*/
/*}*/


.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #071135;
  color: #333;
  /*text-align: center;*/
  /*line-height: 200px;*/
  height: calc(100vh - 60px);
}

.el-main {
  height: calc(100vh - 60px);
}

/*body > .el-container {*/
/*  margin-bottom: 40px;*/
/*}*/

/*.el-container:nth-child(5) .el-aside,*/
/*.el-container:nth-child(6) .el-aside {*/
/*  line-height: 260px;*/
/*}*/

/*.el-container:nth-child(7) .el-aside {*/
/*  line-height: 320px;*/
/*}*/

/*.el-aside {*/
/*  background-color: #071135;*/
/*}*/
/*.con{*/
/*  padding: 0; margin: 0; height: 100vh;*/
/*}*/
/*body > .el-container {*/
/*  margin-bottom: 0px;*/
/*}*/
/*.el-container { padding: 0; margin: 0; height: 100vh; }*/
/*.el-container:nth-child(5) .el-aside,*/
/*.el-container:nth-child(6) .el-aside {*/
/*  line-height: 260px;*/
/*}*/

/*.el-container:nth-child(7) .el-aside {*/
/*  line-height: 320px;*/
/*}*/
</style>
